<script>
export default {
  name: 'user-list',
}
</script>

<script setup>
import {ref} from 'vue'
import Search from "@/views/article/user-list/cpns/search.vue";
import Content from "@/views/article/user-list/cpns/content.vue";
import UserDialog from "@/views/article/user-list/cpns/user-dialog.vue";
import useArticleStore from "@/store/article/index.js";

const page = ref(1)
const size = ref(10)
//调用用户列表数据接口
const articleStore = useArticleStore()
articleStore.getArticleUserListAction(page.value, size.value)

//条件查询用户信息
const searchParamsBtnEmits = (searchParams) => {
  articleStore.getArticleUserListAction(page.value, size.value, searchParams)
}

//重置参数搜索用户
const resetParamsBtnEmits = () => {
  articleStore.getArticleUserListAction(page.value, size.value)
}

//弹出框实列
const dialogRef = ref()

//接收content传递过来的事件
const dialogVisibleEmits = (value) => {
  dialogRef.value.dialogVisible = value
  //新增
  dialogRef.value.isNewOrUpdate = true
}


</script>

<template>
  <div class="user">
    <search
        @search-params-btn-emits="searchParamsBtnEmits"
        @reset-params-btn-emits="resetParamsBtnEmits"
    />
    <content
        :user-list="articleStore.articleUserList"
        @dialog-visible-emits="dialogVisibleEmits"
        @dialog-update-visible-emits="dialogUpdateVisibleEmits"
    />
    <!--    用户添加弹出框-->
    <user-dialog ref="dialogRef"/>
  </div>
</template>

<style scoped lang="less"></style>
